<div class="flex flex-col gap-4">
  <div class="crayons-field">
    <%= form.label :group, class: "crayons-field__label" %>
    <%= select_tag "profile_field[profile_field_group_id]",
                   options_from_collection_for_select(
                     ProfileFieldGroup.all,
                     :id, :name,
                     selected: group&.id
                   ),
                   { class: "crayons-select profile__group-dropdown" } %>
  </div>
  <div class="crayons-field">
    <%= form.label :label, class: "crayons-field__label" %>
    <%= form.text_field :label, class: "crayons-textfield" %>
  </div>
  <div class="crayons-field">
    <%= form.label :description, class: "crayons-field__label" %>
    <%= form.text_field :description, class: "crayons-textfield" %>
  </div>
  <div class="crayons-field">
    <%= form.label :placeholder_text, class: "crayons-field__label" %>
    <%= form.text_field :placeholder_text, class: "crayons-textfield" %>
  </div>
  <div class="crayons-field">
    <%= form.label :input_type, class: "crayons-field__label" %>
    <%= form.select :input_type, options_for_select(ProfileField.input_types.keys, form.object.input_type), {}, { class: "crayons-select" } %>
  </div>
  <div class="crayons-field">
    <%= form.label :display_area, class: "crayons-field__label" %>
    <%= form.select :display_area, options_for_select(ProfileField.display_areas.keys, form.object.display_area), {}, { class: "crayons-select" } %>
  </div>
  <div class="crayons-field crayons-field--checkbox">
    <%= form.check_box :show_in_onboarding, class: "crayons-checkbox" %>
    <%= form.label :show_in_onboarding, class: "crayons-field__label" %>
  </div>
</div>
